<template>
  <div class="HelloVue">
    <p>这是登录表单</p>

    <form>
      <h3>欢迎登录二交易市场</h3>
      <label>用户名：</label><input type="text" v-model="userNamne"><br/>
      <label>密码：</label><input type="text" v-model="password"><br/>
      <div class="submit" @click="login()">登录</div>
    </form>
  </div>
</template>

<script>
import service from '@/utils/requestUitl'

export default {
  name: 'HelloVueWorld',
  props: {
    msg: String
  },
  data() {
    return {
      userNamne: "",
      password: "",
    }
  },
  methods: {
    login() {
      console.log(this.userNamne);
      console.log(this.password);
      // ajax向后台发起请求
      var data = {
        "userNamne": this.userNamne,
        "password": this.password,
      }

      service({
        url: 'http://localhost:8080/login',
        method: 'post',
        data: data,
      })

      this.$router.push("articleCom")

      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.submit{
  width:100px;
  height:30px;
  background-color:red;
}
</style>
